<template>
    <div id="home">        
        <!--轮播图-->
        <el-carousel :interval="4000" type="card" height="280px">
            <el-carousel-item v-for="item,index in swiperList" :key="index">
                <img :src="item.picImg" />
            </el-carousel-item>
        </el-carousel> 
    </div>
    <ContentList :data="state.singerList" :title="state.singer"></ContentList>   
    <ContentList :data="state.singerList" :title="state.singlist"></ContentList>   
</template>
<!--使用Composite API-->
<script setup>
import { ref,reactive } from 'vue'
import ContentList from '../components/ContentList.vue';
import { get } from '../request/http.js'
const swiperList = ref([
    {
        "picImg": import.meta.env.VITE_API_URL + "/img/singerPic/singer.jpg"
    }, {
        "picImg": import.meta.env.VITE_API_URL + "/img/singerPic/singer.jpg"
    }, {
        "picImg": import.meta.env.VITE_API_URL + "/img/singerPic/1668218385115.png"
    }, {
        "picImg": import.meta.env.VITE_API_URL + "/img/singerPic/1668218046098.jpeg"
    }
]);

const state = reactive({
    songList: [],
    singerList: [],
    singer:'歌手',
    singlist:'歌单'
});

const loadData = () => {
    let params = new URLSearchParams();
    //分页组件默认参数是currentPage?
    params.append('curPage', 1);
    params.append('pageSize', 10);
    get('/singers', params).then((res) => {
        if (res.status == 200) {
            state.singerList = res.data.list;
        }
    }).catch((error) => {
        console.log('error');
    });
}
loadData();
</script>
<style >
#home {
    width: 90%;
    margin:0 auto;
    background-color: rgb(151, 141, 141);
    height:200px;
}
img {
    width: 50%;
    height:200px;
}


</style>